<template>
  <div class="dataBox pl-30 pr-30">
    <header>
      <div class="title">隧道桥梁</div>
      <div class="categoryManagement" @click="$router.push('/CategoryManagement')">类目管理</div>
    </header>
    <div class="selectionBox">
      <label class="Correlation">
        <p class="selectItem">选择类目</p>
        <el-select v-model="itemType" clearable>
          <el-option
            v-for="(item,index) in itemsList"
            :key="index"
            :label="item.name"
            :value="item.name"
            @click.native="seleteItem(item)"
          >{{item.name}}({{item.count}})</el-option>
        </el-select>
      </label>
      <p class="documentName">文档名称</p>
      <el-input v-model="documentName" clearable></el-input>
      <div class="selectDocument" @click="selectDocument">查询</div>
      <div class="reset" @click="reset">重置</div>
    </div>
    <div class="mainBox">
      <header>
        <div class="uploadData" @click="uploadDocList">上传</div>
      </header>
      <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>序号</th>
          <th>文件名称</th>
          <th>类目</th>
          <th>文件格式</th>
          <th>上传时间</th>
          <th>操作</th>
        </thead>
        <tbody v-if="this.$store.state.tunnel.tableData">
          <tr v-for="(item, index) in this.$store.state.tunnel.tableData" :key="item.learnId">
            <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
            <td>{{ item.docTitle }}</td>
            <td>{{ item.typeName }}</td>
            <td>{{item.docFormat}}</td>
            <td>{{ item.createTime | dateFormat}}</td>
            <td>
              <!-- <iframe class="prism-player" :src="pdfUrl" width="100%" height="100%" @click="viewDoc(item)">查看</iframe> -->
              <span @click="viewDoc(item)">查看</span>
              <span @click="uploadDoc(item)">下载</span>
              <span @click="writeDoc(item)">编辑</span>
              <span @click="deleteDoc(item)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block" v-if="this.$store.state.tunnel.tableData.length">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="this.$store.state.tunnel.count"
        ></el-pagination>
      </div>
      <!-- 当表头为空时 -->
      <div class="empty" v-if="this.$store.state.tunnel.tableData.length===0">
        <img src="../../../assets/scene/empty.png" alt class="emptyLogo" />
        <span>空空如也</span>
      </div>
      <!-- 添加盒子 -->
      <div class="addbox" v-if="this.$store.state.ifShowCover&&this.$store.state.showUploadBox">
        <uploadBox></uploadBox>
      </div>
      <!-- 删除盒子 -->
      <delete-alert-box
      v-if="isDelete"
      :isDelete=isDelete
      :descTips=descTips
      @Confirm=Confirm
      @Cancel=Cancel
      ></delete-alert-box>
      <!-- 编辑盒子 -->
      <div class="editBox"  v-if="this.$store.state.ifShowCover&&this.$store.state.showEditBox">
        <editBox :editInfo="editInfo"></editBox>
      </div>
    </div>
  </div>
</template>

<script>
import uploadBox from '../components/uploadBox'
import editBox from '../components/editBox'
import { getItemList, uploadDocument, deleteData } from '@/api/documentModule'
import moment from 'moment'
export default {
  data () {
    return {
      // 项目id
      IndexId: 2,
      itemIndex: 1,
      // 当前页
      currentPage: +'',
      // 分页
      total: +'',
      index: 1,
      pageSize: 10,
      // 表格
      DataList: [],
      // 类目
      itemsList: [],
      itemid: '',
      // 选择类目
      itemType: '',
      documentName: '',
      // 编辑类目信息
      editInfo: {},
      descTips: [],
      isDelete: false,
      deleteId: []
    }
  },
  components: {
    uploadBox,
    editBox
  },
  filters: {
    dateFormat: function (dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm')
    }
  },
  methods: {
    handleCurrentChange (val) {
      // // console.log(val)
      this.index = val
      this.$store.dispatch('tunnel/updateTunnelList', {
        pageSize: this.pageSize,
        id: this.IndexId,
        fileName: this.documentName,
        index: this.index,
        itemid: this.itemid
      })
    },
    // 展示列表
    async getDataList () {
      await this.$store.dispatch('tunnel/updateTunnelList', {
        pageSize: this.pageSize,
        id: this.IndexId,
        fileName: this.documentName,
        index: this.index,
        itemid: this.itemid
      })
    },
    // 预览文档
    async viewDoc (item) {
      this.$_viewFile(item.docUrl, item.docFormat)
    },
    // 下载文档
    async uploadDoc (item) {
      // console.log(item)
      const res = await uploadDocument(item.docUrl)
      this.$_uploadBlobFileLine(res.data, item.docTitle, 'application/pdf')
    },
    // 编辑文档
    writeDoc (item) {
      this.editInfo = item
      this.$store.state.ifShowCover = true
      this.$store.state.showEditBox = true
    },
    // 删除文档
    async deleteDoc (item) {
      this.deleteId.push(item.learnId)
      this.descTips = [{
        tips: `确定删除"${item.docTitle}"？`,
        default: ''
      }]
      this.isDelete = true
    },
    async Confirm () {
      // console.log('确定')
      const { data: res } = await deleteData(this.deleteId)
      // console.log(res)
      if (res.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000
        })
        this.isDelete = false
        this.getDataList()
      }
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    },
    // 查看资料类目列表
    async getDataItemsList () {
      const { data: res } = await getItemList(this.IndexId)
      this.itemsList = res.data
    },
    // 选择类目模糊查询
    async seleteItem (item) {
      if (item.id) {
        this.itemid = item.id
      } else {
        this.itemid = ''
      }
      await this.$store.dispatch('tunnel/updateTunnelList', {
        pageSize: this.pageSize,
        id: this.IndexId,
        fileName: this.documentName,
        index: this.index,
        itemid: this.itemid
      })
    },
    // 查询相关文档
    async selectDocument () {
      await this.$store.dispatch('tunnel/updateTunnelList', {
        pageSize: this.pageSize,
        id: this.IndexId,
        fileName: this.documentName,
        index: this.index,
        itemid: this.itemid
      })
    },
    // 重置文档
    async reset () {
      this.itemid = ''
      this.documentName = ''
      await this.$store.dispatch('tunnel/updateTunnelList', {
        pageSize: this.pageSize,
        id: this.IndexId,
        fileName: this.documentName,
        index: this.index,
        itemid: this.itemid
      })
      this.itemType = ''
    },
    // 控制更新盒子隐藏
    uploadDocList () {
      this.$store.state.showUploadBox = true
      this.$store.state.ifShowCover = true
    }
  },
  created () {
    this.getDataList()
    this.getDataItemsList()
  }
}
</script>

<style scoped lang="scss">

.addMainBox {
  position: relative;
  .Correlation {
    .select {
      position: absolute;
      width: 168px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: right;
      top: 53px;
      left: 42px;
    }
    .select::before {
      content: "*";
      color: #4868ff;
    }
    .el-select {
      width: 400px;
      height: 48px;
      position: absolute;
      top: 45px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .uploadDoc {
    position: relative;
    .select {
      position: absolute;
      width: 168px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: right;
      top: 120px;
      left: 42px;
    }
    .select::before {
      content: "*";
      color: #4868ff;
    }
    .selectUpload {
      cursor: pointer;
      position: absolute;
      top: 113px;
      left: 220px;
      width: 84px;
      height: 36px;
      border-radius: 18px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 36px;
      text-align: center;
      ::v-deep .el-upload-dragger {
        width: 84px;
        height: 36px;
        background: rgba(72, 104, 255, 1);
        border: 0;
      }
    }
    .warning {
      position: absolute;
      top: 122px;
      right: 169px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 180, 21, 1);
    }
  }
  .uploadDocList {
    position: absolute;
    top: 170px;
    width: 100%;
    height: 334px;
    .uploadDocItem {
      position: absolute;
      width: 400px;
      height: 72px;
      border: 1px solid rgba(242, 242, 242, 1);
      margin-left: 220px;
      img {
        position: absolute;
        top: 15px;
        left: 16px;
        width: 42px;
        height: 42px;
      }
      p {
        position: absolute;
        line-height: 72px;
        left: 70px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    .el-icon-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 23px;
      cursor: pointer;
      line-height: 72px;
      font-size: 18px;
    }
    }
    .uploadDocItem:hover {
      border: 1px solid #ff2b2b;
      .el-icon-close {
        color: #ff2b2b;
      }
    }
  }
}
.mainBox .deleteBox {
  z-index: 999;
  position: absolute;
  top: -80px;
  left: 45%;
  transform: translateX(-50%);
}
@import "../../../styles/clickBox.scss";
@import "../../../styles/dataModule.scss";
.dataBox{
  height: calc(100% - 30px);
  .mainBox{
    min-height: calc(100% - 194px);
  }
}
</style>
